<template>
	<view class="jf-input_label" v-if="props.label">{{props.label}}</view>
	<view class="jf-input" v-if="props.mode !== 'none'">
		<view class="jf-input__background" 
			:class="{
				'active': data.focus,
				'danger': props.danger
			}">
			<view class="jf-input__box">
				<image :src="props.icon" v-if="props.icon" class="jf-input__icon"></image>
				<input
					v-if="props.mode === 'input'"
					:type="props.type"
					:password="props.password"
					class="jf-input__content"
					:placeholder="props.placeholder"
					placeholder-style="color:#B2B9C6"
					:style="{
						'paddingLeft': props.icon ? '20rpx' : '32rpx'
					}"
					:disabled="props.disabled"
					v-model="props.modelValue"
					:maxlength="props.maxlength"
					:confirm-type="props.confirmType"
					@input="input"
					@focus="focus()"
					@blur="blur()"/>
				<view 
					class="jf-input__content"
					:class="{'jf-input__content-placeholder': !props.modelValue}"
					@click="handle"
					v-if="props.mode === 'selector'"
					:style="{
						'paddingLeft': props.icon ? '20rpx' : '32rpx'
					}"
				>
					{{props.modelValue || props.placeholder}}
				</view>
				<view class="jf-input__right">
					<slot name="right">
						<view class="jf-input__right-max" v-if="props.limit">{{props.modelValue ? props.modelValue.length : 0}}/{{props.maxlength}}</view>
					</slot>
					<image src="" class="jf-input__selector-icon" v-if="props.mode === 'selector'"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue';
	
	const props = withDefaults(defineProps<{
		mode?: 'selector' | 'input' | 'none'
		type?: 'digit' | 'idcard' | 'nickname' | 'number' | 'safe-password' | 'tel' | 'text'
		password?: boolean
		confirmType?: 'send' | 'search' | 'next' | 'go' | 'done'
		modelValue?: string
		icon?: any
		label?: string
		placeholder?: string
		disabled?: boolean
		danger?: boolean
		maxlength?: number
		limit?: boolean
	}>(),{
		mode: 'input',
		type: 'text',
		password: false,
		confirmType: 'done',
		modelValue: undefined,
		icon: null,
		label: "",
		placeholder: '',
		disabled: false,
		danger: false,
		maxlength: -1,
		limit: false
	})
	const emits = defineEmits<{
		(e: "update:modelValue", value: string)
		(e: "update:danger", status: boolean)
		(e: "input", event: any)
		(e: "click", event: any)
	}>()
	const data = reactive({
		focus: false
	})
	
	const input = (event:any):void =>{
		emits("input", event)
		emits("update:modelValue", event.detail.value)
	}
	const focus = ():void =>{
		emits("update:danger", false)
		data.focus = true;
	}
	const blur = ():void =>{
		data.focus = false;
	}
	const handle = (event:any):void =>{
		if(props.disabled) return
		emits('click', event)
	}
</script>

<style lang="scss">
	.jf-input_label{
		width: 654rpx;
		margin-left: 48rpx;
		font-size: 30rpx;
		color: #1F2937;
		font-weight: 500;
		padding-bottom: 32rpx;
	}
	.jf-input{
		width: 654rpx;
		height: 144rpx;
		margin-left: 48rpx;
		.jf-input__background{
			width: 654rpx;
			height: 96rpx;
			border-radius: 24rpx;
			padding: 2rpx;
			background: #F2F4F6;
			box-sizing: border-box;
			.jf-input__box{
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 650rpx;
				height: 92rpx;
				background: #F2F4F6;
				border-radius: 24rpx;
				.jf-input__icon{
					width: 40rpx;
					height: 40rpx;
					padding-left: 32rpx;
				}
				.jf-input__content{
					flex-grow: 1;
					padding-right: 32rpx;
					height: 92rpx;
					line-height: 92rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #1F2937;
					&.jf-input__content-placeholder{
						color: #B2B9C6;
					}
				}
				.jf-input__right{
					flex-shrink: 0;
					display: flex;
					flex-direction: row;
					align-items: center;
					.jf-input__selector-icon{
						width: 32rpx;
						height: 32rpx;
						padding-right: 32rpx;
					}
					.jf-input__right-max{
						font-size: 32rpx;
						color: #B2B9C6;
						font-weight: 400;
						padding-right: 32rpx;
					}
				}
			}
			&.active{
				background: var(--background);
				.jf-input__box{
					background: #ffffff;
				}
			}
			&.danger{
				background: #F40002;
			}
		}
	}
</style>
